<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <button @click="fetchHandle">ajax-fetch</button>
    </div>
</body>
<script>
    /* 
        ajax 
            基于 XMLHttpRequest 引擎，发送请求，处理响应数据，但是太过粗糙，且代码复杂。

        fetch : 
            基于 Promise , 对 xhr 进行了包装升级 
            有兼容性问题   
                兼容性查询： https://caniuse.com/
                fetch 策略：https://github.com/camsong/fetch-ie8
                阮一峰： https://segmentfault.com/a/1190000003810652

        Live Server : 一个具有实时加载功能的小型服务器。
            安装 检索 Live Server，并安装
            使用 右键页面，Open with Live Server(同一个网段的同事，可以通过浏览器访问页面/数据)。
            停止：VSCode 下面底部点击，Port:5500 

        fetch q请求并传递参数(见 node321 day09)：    
            get url 传参    
            get 占位符 传参    
            post urlencoded 传参
            post json 传参
    */
    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            fetchHandle() {
                // live server 打开该页面
                // http://127.0.0.1:5500/day03/json/test.json

                fetch("./json/test.json")
                    .then(res => {
                        // 状态码、响应头
                        // console.log(res);
                        // 解析真正的数据
                        // return res.text();
                        return res.json();
                    })
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    })
                    .finally(() => {
                        console.log("finally");
                    });
            }
        }
    });
</script>

</html>